{% if en %}
<div role="tabpanel" class="tab-pane config-section" id="theme">
    <form id="logo-upload" class="form-upload" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="ctf_logo">
                Logo
                <small class="form-text text-muted">
                    Logo to use for the website instead of a CTF name.
                </small>
            </label>

            {% if ctf_logo %}
            <div class="d-block py-3">
                <img id="ctf_logo_preview" class="img-responsive ctf_logo"
                     src="{{ url_for('views.files', path=ctf_logo) }}"
                     height="80">
                <button type="button" id="remove-logo" class="btn-sm btn-danger">
                    Remove Logo
                </button>
            </div>
            {% endif %}

            <div class="row">
                <div class="col-md-9">
                    <input class="form-control-file" id="ctf_logo_file" name='file' type='file' accept="image/*" placeholder="CTF Logo">
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="d-inline-block float-right">
                            <button type="submit" class="btn-sm btn-primary float-right">Upload</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <form id="ctf-small-icon-upload" class="form-upload" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="small_icon">
                Small Icon
                <small class="form-text text-muted">
                    <a href='https://en.wikipedia.org/wiki/Favicon' target='_blank'>favicon</a> used in user's browsers. Only PNGs accepted. Must be 32x32px.
                </small>
            </label>

            {% if ctf_small_icon %}
            <div class="d-block py-3">
                <img id="ctf_small_icon_preview" class="img-responsive ctf_small_icon"
                     src="{{ url_for('views.files', path=ctf_small_icon) }}"
                     height="32">
                <button type="button" id="remove-small-icon" class="btn-sm btn-danger">
                    Remove Icon
                </button>
            </div>
            {% endif %}

            <div class="row">
                <div class="col-md-9">
                    <input class="form-control-file" id="ctf_small_icon_file" name='file' type='file' accept=".png" placeholder="Small Icon">
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="d-inline-block float-right">
                            <button type="submit" class="btn-sm btn-primary float-right">Upload</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <hr>

    <div class="modal fade" role="document" id="theme-settings-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Theme Settings</h5>
                </div>
                <div class="modal-body">
                    {% include ctf_theme + "/config.html" ignore missing %}
                </div>
            </div>
        </div>
    </div>

    <form method="POST" autocomplete="off" class="w-100">
        <div class="form-group">
            <label for="ctf_theme">
                Theme
                <small class="form-text text-muted">
                    Switch themes to change CTFd's aesthetics
                </small>
            </label>
            <select class="form-control custom-select" id="ctf_theme" name="ctf_theme">
                <option>{{ ctf_theme }}</option>
                {% for theme in themes %}
                <option>{{ theme }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group">
            <label>
                Theme Color
                <small class="form-text text-muted">
                    Color used by theme to control aesthetics. Requires theme support.
                </small>
            </label>
            <div class="row">
                <div class="col-md-9">
                    <input type="color" id="config-color-picker">
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="d-inline-block float-right">
                            <button type="button" class="btn-sm btn-primary" id="config-color-update">Update CSS</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label>
                Theme Header
                <small class="form-text text-muted">
                    Theme headers are inserted just before the <code>&lt;/head&gt;</code> tag on all public facing pages.
                    Requires theme support.
                </small>
            </label>
            <textarea class="form-control" id="theme-header" name="theme_header" rows="7">{{ theme_header or "" }}</textarea>
        </div>

        <div class="form-group">
            <label>
                Theme Footer
                <small class="form-text text-muted">
                    Theme footers are inserted just before the <code>&lt;/body&gt;</code> tag on all public facing pages.
                    Requires theme support.
                </small>
            </label>
            <textarea class="form-control" id="theme-footer" name="theme_footer" rows="7">{{ theme_footer or "" }}</textarea>
        </div>

        <div class="form-group">
            <label for="ctf_theme">
                Theme Settings
            </label>
            <div class="d-block pb-2">
                <button type="button" class="btn-sm btn-primary" id="theme-settings-button">
                    Settings Editor
                </button>
            </div>
            <textarea class="form-control" id="theme-settings" name="theme_settings" rows="7">{{ theme_settings or "" }}</textarea>
            <small class="form-text text-muted">
                Settings specific to the theme
            </small>
        </div>

        <button type="submit" class="btn btn-md btn-primary float-right">Update</button>
    </form>
</div>
{% else %}
<div role="tabpanel" class="tab-pane config-section" id="theme">
    <form id="logo-upload" class="form-upload" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="ctf_logo">
                Logo
                <small class="form-text text-muted">
                    网页左上角的徽标，代替默认显示的CTFd平台名称
                </small>
            </label>

            {% if ctf_logo %}
            <div class="d-block py-3">
                <img id="ctf_logo_preview" class="img-responsive ctf_logo"
                     src="{{ url_for('views.files', path=ctf_logo) }}"
                     height="80">
                <button type="button" id="remove-logo" class="btn-sm btn-danger">
                    删除标志
                </button>
            </div>
            {% endif %}

            <div class="row">
                <div class="col-md-9">
                    <input class="form-control-file" id="ctf_logo_file" name='file' type='file' accept="image/*" placeholder="CTF Logo">
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="d-inline-block float-right">
                            <button type="submit" class="btn-sm btn-primary float-right">上传</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <form id="ctf-small-icon-upload" class="form-upload" method="POST" enctype="multipart/form-data">
        <div class="form-group">
            <label for="small_icon">
                小图标
                <small class="form-text text-muted">
                    <a href='https://en.wikipedia.org/wiki/Favicon' target='_blank'>图标</a>在用户的浏览器的标签页中显示。 仅接受 PNG格式。 必须为 32x32 像素。
                </small>
            </label>

            {% if ctf_small_icon %}
            <div class="d-block py-3">
                <img id="ctf_small_icon_preview" class="img-responsive ctf_small_icon"
                     src="{{ url_for('views.files', path=ctf_small_icon) }}"
                     height="32">
                <button type="button" id="remove-small-icon" class="btn-sm btn-danger">
                    删除图标
                </button>
            </div>
            {% endif %}

            <div class="row">
                <div class="col-md-9">
                    <input class="form-control-file" id="ctf_small_icon_file" name='file' type='file' accept=".png" placeholder="Small Icon">
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="d-inline-block float-right">
                            <button type="submit" class="btn-sm btn-primary float-right">上传</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <hr>

    <div class="modal fade" role="document" id="theme-settings-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">主题设置</h5>
                </div>
                <div class="modal-body">
                    {% include ctf_theme + "/config.html" ignore missing %}
                </div>
            </div>
        </div>
    </div>

    <form method="POST" autocomplete="off" class="w-100">
        <div class="form-group">
            <label for="ctf_theme">
                主题
                <small class="form-text text-muted">
                    切换主题以改变 CTFd 的外观
                </small>
            </label>
            <select class="form-control custom-select" id="ctf_theme" name="ctf_theme">
                <option>{{ ctf_theme }}</option>
                {% for theme in themes %}
                <option>{{ theme }}</option>
                {% endfor %}
            </select>
        </div>

        <div class="form-group">
            <label>
                主题颜色
                <small class="form-text text-muted">
                    设置主题颜色。 需要所选主题支持。
                </small>
            </label>
            <div class="row">
                <div class="col-md-9">
                    <input type="color" id="config-color-picker">
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <div class="d-inline-block float-right">
                            <button type="button" class="btn-sm btn-primary" id="config-color-update">更新CSS样式表</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label>
                自定义主题页面头
                <small class="form-text text-muted">
                    主题标题插入到所有公开页面上的 <code>&lt;/head&gt;</code> 标记之前。需要所选主题支持。
                </small>
            </label>
            <textarea class="form-control" id="theme-header" name="theme_header" rows="7">{{ theme_header or "" }}</textarea>
        </div>

        <div class="form-group">
            <label>
                主题页脚
                <small class="form-text text-muted">
                    主题页脚插入在所有公开页面上的 <code>&lt;/body&gt;</code> 标记之前。需要所选主题支持。
                </small>
            </label>
            <textarea class="form-control" id="theme-footer" name="theme_footer" rows="7">{{ theme_footer or "" }}</textarea>
        </div>

        <div class="form-group">
            <label for="ctf_theme">
                主题设置
            </label>
            <div class="d-block pb-2">
                <button type="button" class="btn-sm btn-primary" id="theme-settings-button">
                    设置编辑器
                </button>
            </div>
            <textarea class="form-control" id="theme-settings" name="theme_settings" rows="7">{{ theme_settings or "" }}</textarea>
            <small class="form-text text-muted">
                特定于主题的设置
            </small>
        </div>

        <button type="submit" class="btn btn-md btn-primary float-right">更新</button>
    </form>
</div>
{% endif %}

